<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

import { defineMessage } from '@/locales'
import { RouterName } from '@/router/name'
import { useCourseList } from './composables/useCourseList'

import enUS from './locales/en-US.json' with { type: 'json' }
import zhCN from './locales/zh-CN.json' with { type: 'json' }

useI18n<[typeof import('./locales/zh-CN.json')], Locales>({
  useScope: 'local',
  messages: defineMessage(enUS, zhCN)
})

const router = useRouter()
const gotoLab = (classID: number) => {
  router.push({ name: RouterName.CourseDetail, params: { classID } })
}

const { classes, isLoading } = useCourseList()
</script>

<template>
  <a-grid class="pb-xs" :cols="{ xs: 1, sm: 2, md: 3, lg: 4 }" :row-gap="12" :col-gap="12">
    <a-grid-item v-if="isLoading">
      <a-skeleton animation class="bg-arco-2 pa-xs pb-xl rounded">
        <a-space direction="vertical" :style="{ width: '100%' }" size="mini">
          <a-skeleton-line :rows="3" />
        </a-space>
      </a-skeleton>
    </a-grid-item>
    <a-grid-item v-else v-for="{ id, name, teacher, description } of classes" :key="id">
      <section
        @click="gotoLab(id)"
        hover=" cursor-pointer shadow-lg bg-arco-gray-1"
        class="card pb-xs transition-transform transition-shadow border-solid border-1 border-arco-gray-4"
      >
        <header>
          <a-typography-text code>{{ id }}</a-typography-text>
          <span class="text-arco-2 font-bold ml-1">{{ name }}</span>
        </header>

        <p class="my-2">
          <a-tag size="small" bordered color="green" class="px-1!">{{ teacher.username }}</a-tag>
          / {{ teacher.name }}
        </p>
        <a-typography-paragraph
          class="min-h-12 mb-0!"
          type="secondary"
          :ellipsis="{
            rows: 2,
            showTooltip: {
              type: 'popover',
              props: { style: { maxWidth: `300px` }, position: 'tr' }
            }
          }"
        >
          {{ description }}
        </a-typography-paragraph>
      </section>
    </a-grid-item>
  </a-grid>
</template>
